import React, { memo, useState } from 'react'
import { Card, Table, Button, Modal,message } from 'antd'

export default memo(function Index() {
    
    const data = [
        {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York Park',
        },
        {
            key: '2',
            name: 'Jim Green',
            age: 40,
            address: 'London Park',
        },
    ]

    const columns = [
        {
            title: 'Full Name',
            width: 100,
            dataIndex: 'name',
            key: 'name',
            fixed: 'left',
        },
        {
            title: 'Age',
            width: 100,
            dataIndex: 'age',
            key: 'age',
            fixed: 'left',
        },
        { title: 'Column 1', dataIndex: 'address', key: '1' },
        { title: 'Column 2', dataIndex: 'address', key: '2' },
        { title: 'Column 3', dataIndex: 'address', key: '3' },
        { title: 'Column 4', dataIndex: 'address', key: '4' },
        { title: 'Column 5', dataIndex: 'address', key: '5' },
        { title: 'Column 6', dataIndex: 'address', key: '6' },
        { title: 'Column 7', dataIndex: 'address', key: '7' },
        { title: 'Column 8', dataIndex: 'address', key: '8' },
        {
            title: 'Action',
            key: 'operation',
            fixed: 'right',
            width: 100,
            // eslint-disable-next-line
            render: () => <a>action</a>,
        },
    ]
    const columns1 = [
        {
            title: '姓名',
            dataIndex: 'name',
            width: 120
        },
        {
            title: '年龄',
            dataIndex: 'age'
        },
        {
            title: '地址',
            dataIndex: 'address'
        }
    ]

    const data1 = []

    // 模拟数据
    for (let i = 0; i < 101; i++) {
        data1.push({
            key: i,
            name: `casey${i}`,
            age: 18,
            address: `幸福里街道${i}`
        })
    }
    const columns2 = [
        {
            id: 'ID',
            dataIndex: 'key'
        },
        {
            title: '姓名',
            dataIndex: 'name'
        },
        {
            title: '年龄',
            dataIndex: 'age'
        },
        {
            title: '操作',
            key: 'operaion',
            // text:row的值
            render: (text, record) => {
                return <Button onClick={() => removeItem(text, record.key)}>删除</Button>
            }
        }
    ]
    const removeItem = (text, key) => {
        console.log(text, key)
        Modal.confirm({
            title: '确认',
            content: '你确定要离开我吗？',
            onOk: () => {
                setState(state.filter(item => item.key !== key))
                message.success('删除成功')
            }
        })
    }
    const data2 = [
        {
            key: '1',
            name: 'casey1',
            age: '18',
            address: '幸福里大街'
        },
        {
            key: '2',
            name: 'casey2',
            age: '18',
            address: '幸福里大街'
        },
        {
            key: '3',
            name: 'casey3',
            age: '18',
            address: '幸福里大街'
        }
    ]
    const [state, setState] = useState(data2)
    return (
        <div>
            {/* 对于列很多的数据，我们可以去固定前后的列，横向滚动查看其他数据,需要和scroll.x配合使用 */}
            <Card title='高级表格' style={{ width: '800px' }}>
                <Table dataSource={data} columns={columns} scroll={{ x: 1000 }} />
            </Card>
            <Card title='高度固定的表格'>
                <Table
                    dataSource={data1}
                    columns={columns1}
                    pagination={{ pageSize: 20 }}
                    scroll={{ y: 260 }} />
            </Card>
            <Card title='高度固定的表格的删除'>
                <Table
                    dataSource={state}
                    columns={columns2}
                    pagination={{ pageSize: 20 }}
                    scroll={{ y: 260 }} />
            </Card>
        </div>
    )
})

